<template>
	<div>
		<!-- 搜索表单 -->
		<yd-form ref="myForm" :options="formOptions" :model="formData" :btns="formBtns" @form-init="handleFormInited">
			<template #form-btn="props">
				<div>
					<el-button class="yd-form-btn" type="primary" @click="handleSearch(props.model)">查询</el-button>
				</div>
			</template>
		</yd-form>
		<!-- 列表 -->
		<yd-table
			:formData="formData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="handleSearch"
			@currentChangeHandler="handleSearch"
			@sortChangeHandler="handleSearch"
			@selectionChangeHandler="handleSelectionChange"
		></yd-table>
		<!-- 弹出层 -->
		<el-dialog v-model="dialog.addOrEdit.open" :title="dialog.addOrEdit.title" width="600px" append-to-body center>
			<el-form ref="addOrEditForm" :model="dialog.addOrEdit.form" :rules="dialog.addOrEdit.rule" label-width="120px">
				<el-form-item label="资源属性" prop="resourceType">
					<el-select v-model="dialog.addOrEdit.form.resourceType" filterable placeholder="请选择资源类型" width="100%">
						<el-option v-for="(value, key, index) in options.resourceType" :key="index" :label="value" :value="parseInt(key)"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="URL" prop="url">
					<el-input v-model="dialog.addOrEdit.form.url" disabled show-word-limit>
						<template #append><el-button @click="selectUrlClick" icon="Tickets"></el-button></template>
					</el-input>
				</el-form-item>
				<el-form-item label="统计标识" prop="statisticalSign">
					<el-input v-model="dialog.addOrEdit.form.statisticalSign" placeholder="请输入统计标识" maxlength="32" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="超时时间(秒)" prop="timeout">
					<el-input-number v-model="dialog.addOrEdit.form.timeout" :min="0" :max="99999" :step="1" :precision="0" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" :loading="dialog.addOrEdit.btnLoading" @click="handleSubmit(beforeAdd, beforeAdd)">确 定</el-button>
				<el-button @click="dialog.addOrEdit.open = false">取 消</el-button>
			</template>
		</el-dialog>
		<!-- 选择业务服务资源弹出层 -->
		<SelectServerResource ref="selectServerResourceRef"></SelectServerResource>
	</div>
</template>

<script lang="tsx">
import Curd from '@/views/management/middle-platform/curd';
import { page, save, updateById, removeByIds } from '@/api/middle-platform/conf-resource';
import { resourceTypeOptions } from '@/views/management/middle-platform/select-option';
import SelectServerResource from '@/views/management/stepManage/selectServerResource.vue';
import { getIndicator } from '@/api/admin/businessMonitor/businessStepConfig';

export default {
	name: 'ConfResource',
	components: {
		SelectServerResource,
	},
	mixins: [Curd],
	props: {
		currentServiceId: {
			type: Number,
			default: 0,
		},
	},
	data() {
		return {
			// 接口
			api: {
				query: page,
				add: save,
				edit: updateById,
				remove: removeByIds,
			},
			// 下拉选项
			options: {
				// 资源类型
				resourceType: {},
			},
			// 搜索表单
			formData: {
				pageSize: 10,
				pageNum: 1,
			},
			formOptions: [
				{
					type: 'input',
					prop: 'url',
					label: 'URL',
					attrs: {
						clearable: true,
					},
					span: 10,
				},
			],
			formBtns: [],
			tableConfig: {
				columns: [
					{
						label: '资源编码',
						prop: 'resourceCode',
						render: (row: any, val: any) => {
							return (
								<el-button type="primary" link onClick={this.stepCodeClick.bind(this, row)}>
									{val}
								</el-button>
							);
						},
					},
					{
						label: 'URL',
						prop: 'url',
					},
					{
						label: '统计标识',
						prop: 'statisticalSign',
					},
					{
						label: '资源属性',
						prop: 'resourceType',
						formatter: (row: any, val: any) => {
							return this.options.resourceType && val && this.options.resourceType[val];
						},
					},
					{
						label: '超时时间',
						prop: 'timeout',
					},
				],
				// 分页
				pagination: {
					pageNum: 1,
					total: 0,
				},
				// 加载层
				loading: false,
				// 启用复选框
				enableSelection: true,
				// 工具栏
				toolBar: [
					{ name: '新增', icon: 'yd-icon-plus', handler: () => this.handleAdd() },
					{ name: '修改', icon: 'yd-icon-edit', disable: 'single', handler: () => this.handleEdit() },
					{ name: '删除', icon: 'yd-icon-delete', disable: 'multiple', handler: () => this.handleDelete() },
				],
			},
			tableData: [],
			selectUrlDialogType: {
				open: false,
				loading: false,
			},
		};
	},
	watch: {
		currentServiceId: {
			handler(newVal, oldVal) {
				this.formData.serviceIdList = [newVal];
				this.handleSearch(null);
			},
			deep: true,
			immediate: true,
		},
	},
	created() {
		// 资源类型
		resourceTypeOptions().then((data: any) => {
			this.options.resourceType = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
		});
		// 设置校验规则
		this.dialog.addOrEdit.rule = {
			resourceType: [{ required: true, message: '资源类型不能为空', trigger: 'change' }],
			url: [{ required: true, message: 'URL不能为空', trigger: 'blur' }],
		};
	},
	methods: {
		beforeAdd() {
			this.dialog.addOrEdit.form.serviceId = this.currentServiceId;
		},
		selectUrlClick() {
			this.$refs.selectServerResourceRef.openDialog(() => {
				const selected = this.$refs.selectServerResourceRef.getSelectServerResource();
				this.dialog.addOrEdit.form.url = selected.identifyStr;
				this.dialog.addOrEdit.form.resourceCode = selected.resourceCode;
			});
		},
		stepCodeClick(row: any) {
			this.$router.push({
				path: '/management/indicatorManage/proprietaryIndicatorManage/detail',
				query: {
					resourceCode: row.resourceCode,
					identifyStr: row.url,
				},
			});
		},
	},
};
</script>

<style scoped lang="scss">
:deep .el-input-number__decrease,
:deep .el-input-number__increase {
	background-color: rgba(0, 0, 0, 0.2) !important;
	border-right: none !important;
	border-left: none !important;
}
</style>
